<template>
  <div id="home">
    <!--    搜索框-->
    <div class="search-bar">
      <a-input-search
        v-model:value="searchParams.searchText"
        placeholder="从海量文件中搜索"
        enter-button="搜索"
        size="large"
        @search="doSearch"
      />
    </div>
    <!--    分类和标签筛选-->
    <a-tabs v-model:active-key="selectedCategory" @change="doSearch">
      <a-tab-pane key="all" tab="全部" />
      <a-tab-pane v-for="category in categoryList" :tab="category" :key="category" />
    </a-tabs>
    <div class="tag-bar">
      <span style="margin-right: 8px">标签：</span>
      <a-space :size="[0, 8]" wrap>
        <a-checkable-tag
          v-for="(tag, index) in tagList"
          :key="tag"
          v-model:checked="selectedTagList[index]"
          @change="doSearch"
        >
          {{ tag }}
        </a-checkable-tag>
      </a-space>
      <a-space style="float: right">
        <a-radio-group v-model:value="mode" @change="modeChange">
          <a-radio-button value="big"><AppstoreOutlined /></a-radio-button>
          <a-radio-button value="small"><UnorderedListOutlined /></a-radio-button>
        </a-radio-group>
        <a-button type="primary" ghost href="/add_file" target="_blank"><FileAddOutlined />创建文件</a-button>
      </a-space>
    </div>

    <div style="margin-top: 16px" />
    <!--    文件大图标显示-->
    <FileListBig
      v-if="mode === 'big'"
      :dataList="dataList"
      :loading="loading"
      :grid="{ gutter: 2, xs: 3, sm: 4, md: 5, lg: 6, xl: 7, xxl: 8 }"
    />
    <FileListSmall v-if="mode === 'small'" :dataList="dataList" :loading="loading" />
    <a-pagination
      show-size-changer
      style="text-align: right"
      v-model:current="searchParams.current"
      v-model:pageSize="searchParams.pageSize"
      :total="total"
      @change="onPageChange"
      :page-size-options="pageSizeOptions"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>
</template>

<script setup lang="ts">
import FileListBig from '@/components/FileListBig.vue'
import { onMounted, reactive, ref } from 'vue'
import { listFileTagCategoryUsingGet, listFileVoByPageUsingPost } from '@/api/fileController.ts'
import { message } from 'ant-design-vue'
import { AppstoreOutlined, UnorderedListOutlined, FileAddOutlined } from '@ant-design/icons-vue'
import FileListSmall from '@/components/FileListSmall.vue'
const dataList = ref<API.FileVO[]>([])
const loading = ref(true)
const searchParams = reactive<API.FileQueryRequest>({
  current: 1,
  pageSize: 16,
  sortField: 'createTime',
  sortOrder: 'descend',
}) // 局部更新

const pageSizeOptions = ref<string[]>(['5', '10', '15', '20']);

// 定义数据
const total = ref(0)

const categoryList = ref<string[]>([])
const tagList = ref<string[]>([])
const selectedCategory = ref<string>('all')
const selectedTagList = ref<boolean[]>([])

const mode = ref('big')

// 页面改变
const onPageChange = (page: number, pageSize: number) => {
  searchParams.current = page
  searchParams.pageSize = pageSize
  fetchData()
}

const fetchData = async () => {
  loading.value = true
  // 转换搜索参数
  const params = {
    ...searchParams,
    tags: [] as string[],
  }
  if (selectedCategory.value !== 'all') {
    params.category = selectedCategory.value
  }
  selectedTagList.value.forEach((useTag, index) => {
    if (useTag) {
      params.tags.push(tagList.value[index])
    }
  })
  const res = await listFileVoByPageUsingPost({
    ...params,
  })
  if (res.data.code === 0 && res.data.data) {
    dataList.value = res.data.data.records ?? []
    total.value = res.data.data.total ?? 0
  } else {
    message.error('获取数据失败，' + res.data.message)
  }
  loading.value = false
}

// 页面加载时获取数据, 请求一次
onMounted(() => {
  fetchData()
  getTagCategoryOptions()
})

// 搜索数据
const doSearch = () => {
  // 重置页码
  searchParams.current = 1
  fetchData()
}

/**
 * 获取标签和分类选项
 * @param values
 */
const getTagCategoryOptions = async () => {
  const res = await listFileTagCategoryUsingGet()
  if (res.data.code === 0 && res.data.data) {
    tagList.value = res.data.data.tagList ?? []
    categoryList.value = res.data.data.categoryList ?? []
  } else {
    message.error('获取标签分类失败，' + res.data.message)
  }
}

/**
 * 视图模式改变
 */
const modeChange = () => {
  searchParams.pageSize = 5
  fetchData()
}
</script>

<style scoped></style>
